<!DOCTYPE HTML>
<html>
    <head>
        <title></title>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script>
            function log(s){
                if(window.console){
                    console.log(s)
                }else{
                    var div = document.createElement("div");
                    div.innerHTML = s;
                    document.body.appendChild(div)
                }
            }
            var get = function(i) {
                return document.getElementById( i );
            }
            function addEvent(el, type, callback, useCapture  ){
                if(el.dispatchEvent){//w3c方式优先
                    el.addEventListener( type, callback, !!useCapture  );
                }else {
                    el.attachEvent( "on"+type, callback );
                }
                return callback;//返回callback方便卸载时用
            }
            window.onload = function(){
                function callback(e){
                    log( e.type + " handler: \n" +
                        "e.charCode: " + e.charCode + "\n" +
                        "e.keyCode: " + e.keyCode + "\n" +
                        "e.which: " + e.which + "\n" +
                        "Character Key Pressed:" + String.fromCharCode(e.charCode) )
                }
                addEvent(get("body"),"keypress",callback);
                addEvent(get("body"),"keyup",   callback);
                addEvent(get("body"),"keydown", callback);
            }

        </script>
    </head>
    <body style="height:400px;background:aqua;" id="body">

    </body>
</html>